<template>
  <div>
    <el-form>
      <el-form-item label="订单编号" prop="orderNum">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-form-item label="业务日期" required>
        <el-col :span="11">
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="searchForm.date1" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">至</el-col>
        <el-col :span="11">
          <el-form-item prop="date2">
            <el-date-picker placeholder="选择时间" v-model="searchForm.date2" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="单据状态" prop="status">
        <el-select v-model="searchForm.status" placeholder="请选择单据状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supply">
        <el-input v-model="searchForm.supply"></el-input>
      </el-form-item>
      <el-form-item label="单据状态" prop="sureStatus">
        <el-select v-model="searchForm.sureStatus" placeholder="请选择确认状态">
          <el-option label="状态1" value="staus1"></el-option>
          <el-option label="状态2" value="status2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">导出</el-button>
        <el-button type="primary" @click="submitForm('searchForm')">查询</el-button>
        <el-button @click="resetForm('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="btnBox">
      <el-button type="primary">确认</el-button>
      <el-button type="primary">反确认</el-button>
    </div>

    <div class="block">
      <p>返回200条数据 (100张)</p>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="100">
      </el-pagination>
    </div>

    <div class="table-box">
      <el-table
        :data="tableData"
        style="width: 100%;"
      >
        <el-table-column fixed width="50" prop="check" label="" type="selection"></el-table-column>
        <el-table-column width="120" prop="number" label="订单编号"></el-table-column>
        <el-table-column width="120" prop="date" label="订单日期"></el-table-column>
        <el-table-column width="120" prop="classify" label="业务类型"></el-table-column>
        <el-table-column width="120" prop="supplyNum" label="供应商编码"></el-table-column>
        <el-table-column width="120" prop="supply" label="供应商名称"></el-table-column>
        <el-table-column width="120" prop="documentStatus" label="单据状态"></el-table-column>
        <el-table-column width="120" prop="purchase" label="采购组织"></el-table-column>
        <el-table-column width="120" prop="consignee" label="采购部门"></el-table-column>
        <el-table-column width="120" prop="buyer" label="采购员"></el-table-column>
        <el-table-column width="120" prop="currency" label="货币"></el-table-column>
        <el-table-column width="120" prop="channel" label="渠道"></el-table-column>
        <el-table-column width="120" prop="documentattached" label="采购跟单"></el-table-column>
        <el-table-column width="120" prop="sureStatus" label="确认状态"></el-table-column>
        <el-table-column width="120" prop="payWay" label="付款方式"></el-table-column>
        <el-table-column width="150" prop="Deduction" label="比列扣除预付款"></el-table-column>
      </el-table>
    </div>
    <div class="table-title"><span>明细信息</span></div>
    <el-form class="materielSearch">
      <el-form-item label="物料" prop="orderNum">
        <el-input v-model="searchForm.orderNum"></el-input>
      </el-form-item>
      <el-button type="primary">查询</el-button>
    </el-form>
    <div class="btnBox">
      <el-button type="primary">生产进度汇报</el-button>
      <el-button type="primary">质检申请</el-button>
    </div>
    <div class="table-box">
      <el-table :data="tableData1" style="width: 100%;margin-top: 20px;">
        <el-table-column fixed width="50" prop="check" label="" type="selection"></el-table-column>
        <el-table-column width="120" prop="materielNum" label="物料编码"></el-table-column>
        <el-table-column width="120" prop="materielName" label="物料名称"></el-table-column>
        <el-table-column width="120" prop="Specifications" label="规格型号"></el-table-column>
        <el-table-column width="120" prop="basic" label="基本计量单位"></el-table-column>
        <el-table-column width="120" prop="quantityOrder" label="订货数量"></el-table-column>
        <el-table-column width="120" prop="quantityReceiving" label="累计收货数量"></el-table-column>
        <el-table-column width="120" prop="quantityWarehousing" label="累计入库数量"></el-table-column>
        <el-table-column width="120" prop="unitPrice" label="单价"></el-table-column>
        <el-table-column width="120" prop="includedTax" label="含税单价"></el-table-column>
        <el-table-column width="120" prop="taxRate" label="税率"></el-table-column>
        <el-table-column width="120" prop="discountRate" label="折扣率"></el-table-column>
        <el-table-column width="120" prop="discountAmount" label="折扣额"></el-table-column>
        <el-table-column width="120" prop="amountMoney" label="金额"></el-table-column>
        <el-table-column width="120" prop="amountTax" label="税额"></el-table-column>
        <el-table-column width="120" prop="priceTax" label="价税合计"></el-table-column>
        <el-table-column width="120" prop="deliveryDate" label="交货日期"></el-table-column>
        <el-table-column width="120" prop="productTeam" label="产品小组"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'order',
  data () {
    return{
      searchForm:{
        orderNum: '',
        date1: '',
        date2: '',
        status: '',
        supply: '',
        sureStatus: '',
      },
      currentPage: 1,
      tableData:[
        {
          check: '',
          number: '1234',
          date: '2020-04-12',
          classify: '业务类型',
          supplyNum: '供应商编码',
          supply: '供应商名称',
          documentStatus: '单据状态',
          purchase: '采购组织',
          consignee: '采购部门',
          currency: '货币',
          buyer: '采购员',
          channel: '渠道',
          documentattached: '采购跟单',
          sureStatus: '确认状态',
          payWay: '付款方式',
          Deduction: '比例扣除预付款',
        },
        {
          check: '',
          number: '1234',
          date: '2020-04-12',
          classify: '业务类型',
          supplyNum: '供应商编码',
          supply: '供应商名称',
          documentStatus: '单据状态',
          purchase: '采购组织',
          consignee: '采购部门',
          currency: '货币',
          buyer: '采购员',
          channel: '渠道',
          documentattached: '采购跟单',
          sureStatus: '确认状态',
          payWay: '付款方式',
          Deduction: '比例扣除预付款',
        }
      ],
      tableData1:[
        {
          check: '',
          materielNum: '物料编码',
          materielName: '物料名称',
          Specifications: '规格型号',
          basic: '基本计量单位',
          quantityOrder: '订货数量',
          quantityReceiving: '累计收货数量',
          quantityWarehousing: '累计入库数量',
          unitPrice: '单价',
          includedTax: '含税单价',
          taxRate: '税率',
          discountRate: '折扣率',
          discountAmount: '折扣额',
          amountMoney: '金额',
          amountTax: '税额',
          priceTax: '价税合计',
          deliveryDate: '交货日期',
          productTeam: '产品小组',
        }
      ],
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>

<style scoped="scoped">
</style>
